<template>
  <div>
    <el-input v-model="classValue"></el-input>
    <el-button @click="setClass">设置claas</el-button>
    <el-divider content-position="left">三元表达式</el-divider>
    <template v-for="item in list">
      <div :key="item.id" :class="item.type ? 'active' : 'no_active'">
        {{ item.name }}
      </div>
    </template>
    <!-- 三元表达式的缩写 -->
    <el-divider content-position="left">对象的写法</el-divider>
    <template v-for="item in list">
      <div :key="item.id + '_'" :class="{ active: item.type }">
        {{ item.name }}
      </div>
    </template>
    <el-divider content-position="left">数组写法</el-divider>
    <div ref="box" class="box" :class="[class_1, class_2]"></div>
    <customTable ref="customTable" />
  </div>
</template>

<script>
export default {
  name: "Demo1Demo5",
  data() {
    return {
      classValue: "",
      divClass: "",
      list: [
        {
          id: 1,
          name: "张三",
          type: true,
        },
        {
          id: 2,
          name: "李四",
          type: false,
        },
        {
          id: 3,
          name: "王五",
          type: false,
        },
      ],
      class_1: "box_1",
      class_2: "box_2",
    };
  },
  mounted() {},
  methods: {
    setClass() {
      this.divClass = this.classValue;
      this.list[2].type = true;
      // 通过获取实例的方式设置
      this.$refs.box.className += " box_3";
      // 通过$refs调用子组件的方法
      this.$refs.customTable.customLog();
    },
  },
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: wheat;
}
.active {
  color: red;
}
</style>
